<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
</body>
<script>
    // this指向的问题  
    // 在普通函数中  谁调用函数  this就指向谁
    function fn(){
      console.log(this);
    }
    window.fn()

    let obj ={
        name:'张三',
        sing:function(){
            console.log(this);
        }
    }
    obj.sing()

    setTimeout(function(){
        console.log(this);
    })
    // window.setInterval(function(){
    //     console.log(this);
    // })
//    2.在js的原生事件中，this 点谁指谁
    let btn = document.querySelector('button')
    btn.onclick = function(){
        console.log(this);
        this.style.background = 'red'
    }

    // 3.构造函数中 this指向实例化出来的对象
    function Person(){
        this.name = '张三'
        this.age= 18
        this.fn = function(){
            console.log('111');
        }
        console.log(this);

    }
   let p = new Person()
   console.log(p);


//    4.在Class类中  this指向实例化出来的对象


class Star{
    constructor(name,age){
        this.names = name
        this.ages = age
        this.sing = function(){

        }
        console.log(this);
    }
}
let s = new Star('刘德华',18)
console.log(s);

// 5.在定时器中  setTimeout  setInterval  this指向window  因为setTimeout，setInterval都是window调用的
// 6. // 在箭头函数中，不固化this  箭头函数的this指向，只和声明箭头函数的作用域的this指向有关系
// 箭头函数的this指向声明箭头函数作用域的this  或者说 父作用域的this一致

</script>
</html>